.banner{
    width: 100%;
    height: 200px;
    background: #e8e8e8;
}
main{
    overflow-y: scroll;
}
.ranking{
    position: relative;
    width: 150px;
    margin: 0 10px;
    background: #1592CC ;
    height: 150px;
    border-radius: 10px;
    img{
        position: absolute;
        left: 0;
        bottom: 10px;
        width: 121px;
        height: 121px;
    }
    .pan{
        position: absolute;
        left: 14px;
        top: 15px;
        width: 80px;
        height: 28px;
        color: #000;
        font-size: 16px;
    }
    .span1{
        position: absolute;
        right: 10px;
        bottom: 18px;
        font-size: 32px;
        color: #fff;
    }
}
.clock-count{
    position: relative;
    flex:3;
    margin: 0 10px;
    background: #7BCBF5;
    height: 150px;
    border-radius: 10px;
    .pan1{
        position: absolute;
        left: 14px;
        top: 15px;
      
        height: 28px;
        color: #000;
        font-size: 16px;
    }
    img{
        position: absolute;
        left: 10px;
        bottom: 10px;
        width: 110px;
        height: 110px;
    }
    .clock-btn{
        position: absolute;
        right: 10px;
        bottom: 20px;
        width: 100px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        border: 3px solid rgba(0, 81, 119, 1);
        border-radius: 20px;
    }
    
}
.active{
    background: #ccc;
}
.data{
    position: relative;
    margin-left: 10px;
    margin-right: 10px;
    height: 110px;
    border-radius: 12px;
    .title1{
        position: absolute;
        top: 10px;
        left: 10px;
        color: #fff;
    }
    img{
        width: 100%;
        height: 100%;
        border-radius: 12px;
    }
}
.badges{
    position: relative;
    margin-left: 10px;
    margin-right: 10px;
    height: 110px;
    background: skyblue;
    border-radius: 10px;
    .item1{
        position: absolute;
        top: 10px;
        left: 10px;
    }
    img{
        position: absolute;
        left: 10px;
        bottom: 0;
        width: 100ox;
        height: 100px;
    }
    .item3{
        position: absolute;
        right: 10px;
        bottom: 10px;
        color: rgba(0, 78, 115, 1);
        .item2{
            font-size: 60px;
            font-family: PingFangSC-bold;
        }
    }
}
.item{
    
    width: calc(100% - 20px);
    margin-left: 10px;
    height: 110px;
    background-image: url("../img/course-img01.jpg");
    background-size: cover;
    background-position: center center;
    border-radius: 10px;    
}
.item:last-child{
    background: url("../img/course-img02.png");
    background-size: cover;
    // background-position: center center;
}

.footer-item{
    width: 100px;
    text-align: center;
    font-size: 20px;
    color: #e8e8e8;
    i{
        font-size: 30px;
    }
}
.swiper {
    width: 100%;
    height: 200px;
}  

